home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 April / CMCD0404.ISO / Software / Shareware / Programare / sharp / wwwSharp_setup.exe / {app} / Examples / Html Editor / menu.htc < prev    next >
Encoding:
HTML Component  |  2002-05-30  |  10.7 KB  |  225 lines
  1. <PUBLIC:COMPONENT TAGNAME="menu" LIGHTWEIGHT> 
  2.     <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="cReady();" />
  3.     <PUBLIC:ATTACH EVENT="onclick" ONEVENT="menuClick();" />
  4.     <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="menuItemOver();" />
  5.     <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="menuItemOut();" />
  6.     <PUBLIC:EVENT NAME="onsubmenu_click" ID="propId" />  
  7.     <PUBLIC:DEFAULTS style="cursor:default" />
  8.     <PUBLIC:PROPERTY NAME="backColor" VALUE="menu"/>
  9. </PUBLIC:COMPONENT>
  10. <script language="jscript">
  11. ////////////////////////////////////////////////////////////////////////////////////
  12. // Global Variables
  13. ////////////////////////////////////////////////////////////////////////////////////
  14. var minMenuWidth = 50;          // Minumum width for the children of the popUp
  15. var mColor = "menu";            // Default color used for the backgroundColor
  16. var menuHeight = 23;            // Menu height
  17. var defaultWidth;               // Variable to store the width of the text for an element
  18. var srcElem = null;             // Object to the source element which generated the click event
  19. var ix = "";                    // Left position of the pop-up window
  20. var iy = "";                    // Top position of the pop-up window
  21. var iHeight = "";               // Height of the pop-up window
  22. var iWidth = "";                // Width of the pop-up window
  23. var popUp;                      // The pop-up window object
  24. var menuWidth = 0;              // Temporary variable to store the width of each menu item
  25. var maxMenuWidth = 0;           // Variable to store the maximum menuWidth
  26.  
  27. ////////////////////////////////////////////////////////////////////////////////////
  28. // Function : cReady
  29. // Executed : Executes when oncontentready fires on the HTC document.
  30. // Usage : Oncontentready is used to set initial values and styles once the content
  31. //      of the HTC is parsed.
  32. ////////////////////////////////////////////////////////////////////////////////////
  33. function cReady(){
  34.     // Define the style for the current element.
  35.     if(backColor == null || backColor == ""){
  36.         element.style.backgroundColor = mColor;
  37.     }else{ 
  38.         mColor = backColor;
  39.         element.style.backgroundColor = mColor;
  40.     }
  41.     element.style.fontFamily = "Verdana";
  42.     element.style.height = menuHeight;
  43.     element.style.padding = 4;
  44.     element.style.fontSize = "10px";
  45.     element.style.border = "1px solid";
  46.     element.style.borderColor = mColor;
  47.     // Hide all the first-level children for the Behavior.
  48.     if(element.children.length > 0){
  49.         for(var i = 0; i < element.children.length; i++){
  50.             element.children[i].style.fontSize = "10px";
  51.             element.children[i].style.display = "none";
  52.             element.children[i].style.visibility = "hidden";
  53.             element.children[i].style.height = menuHeight;
  54.         }
  55.     }
  56. }
  57. ////////////////////////////////////////////////////////////////////////////////////
  58. // Function : menuClick
  59. // Executed    : When the onclick event fires on the custom Element.
  60. // Usage    : Creates the pop-up window with the first-level children of the current
  61. //      element and displays the pop-up window with the first-level elements.
  62. //      Each child element will have its own events attached to it using the attach method.            
  63. ////////////////////////////////////////////////////////////////////////////////////
  64. function menuClick(){
  65.     ix = 0;
  66.     iy = 0;
  67.     iHeight = 0;
  68.     iWidth = 0;
  69.     // Retrieve the source element which fired the event.
  70.     srcElem = event.srcElement;
  71.     srcElem.style.borderRight = "1px inset white";
  72.     srcElem.style.borderTop = "1px inset black";
  73.     srcElem.style.borderLeft = "1px inset black";
  74.     srcElem.style.borderBottom = "1px inset white";
  75.     // Hide the popup.
  76.     hidePopup();
  77.     // Create the popup for the current parent menu item.
  78.     popUp = window.createPopup();
  79.     var oPopBody = popUp.document.body;
  80.     // Does the custom element have any children?
  81.     if(srcElem.children.length > 0){
  82.             ix = 0;
  83.             iy = srcElem.offsetHeight;
  84.         // Get pop-up window Height and Width
  85.         iHeight = 23 * srcElem.children.length + 4;
  86.         iWidth = defaultWidth;
  87.         // Empty string to store the innerText of the current element's child.
  88.         var sz = "";
  89.         for(var j = 0; j < element.children.length; j++){
  90.             // Store the innerText of the current element.
  91.             sz = InnerText(element.children[j].innerHTML);
  92.             // Set the menuWidth variable to the length of the sz string.
  93.             menuWidth = sz.length;
  94.             if(menuWidth > maxMenuWidth)
  95.                 maxMenuWidth = menuWidth;
  96.             }
  97.             iWidth = maxMenuWidth * 10;
  98.             if(iWidth < minMenuWidth)
  99.                 iWidth = 60;
  100.             
  101.             // Create an opening string of a SPAN Tag.
  102.             var popupHTML = "<SPAN style='position:absolute;" + "top:0px;" + "left:0px; height:" + iHeight + "px; width:" + iWidth + "px'>";
  103.             // Go through all the first-level children elements and get their outerHTML and append it to the DIV Element as children. 
  104.             for(j = 0; j < element.children.length; j++){
  105.                 // Assign the ID of the current child element to its innerText. 
  106.                 element.children[j].id = element.children[j].id;
  107.                 popupHTML += element.children[j].outerHTML + "\n";
  108.                 element.children[j].style.width = iWidth + "px";
  109.             }
  110.             // Add the closing SPAN Tag to the popupHTML string variable.
  111.             popupHTML += "</" + "SPAN>";
  112.             // Assign the HTML from above into the body of the pop-up window.
  113.             oPopBody.innerHTML = popupHTML;
  114.                // Assign events to each of the children in the pop-up, then show the custom elements in the pop-up.
  115.             for(j = 0; j < oPopBody.children[0].children.length; j++){
  116.                 // Attach events to the children of the menu.
  117.                 oPopBody.children[0].children[j].onmouseover = menuChildmouseOver;
  118.                 oPopBody.children[0].children[j].onclick = menuChildClick;
  119.                 // Define the current child's style to display.
  120.                 oPopBody.children[0].children[j].style.display = "block";
  121.                 oPopBody.children[0].children[j].style.visibility = "visible";
  122.             }
  123.             // Define the popUp's style.
  124.             oPopBody.style.borderLeft = "2 outset white";
  125.             oPopBody.style.borderTop = "2 outset white";
  126.             oPopBody.style.borderRight = "1 outset black";
  127.             oPopBody.style.borderBottom = "1 outset black";
  128.             oPopBody.style.position = "absolute";
  129.             oPopBody.style.backgroundColor = mColor;
  130.             oPopBody.style.fontFamily = "Verdana";
  131.             // Call the hidePop function upon onmouseleave firing.
  132.             popUp.document.body.onmouseleave = hidePopup;
  133.  
  134.             // Show the popUp using the show method.
  135.             popUp.show( ix , iy , iWidth , iHeight, srcElem);    
  136.     }       
  137. }
  138. ////////////////////////////////////////////////////////////////////////////////////
  139. function menuChildmouseOver(){
  140.     // Cancel the event so that it does not bubble up to its parent.
  141.     popUp.document.parentWindow.event.cancelBubble = true;
  142.     // Retrieve the source element from the pop-up which fired the event.
  143.     srcElem = popUp.document.parentWindow.event.srcElement;
  144.     // Define the current element's style.
  145.     srcElem.style.color = "white";
  146.     srcElem.style.background = "highlight";      
  147.     window.status = srcElem.innerHTML;  
  148. }
  149. ////////////////////////////////////////////////////////////////////////////////////
  150. var oEvent;
  151. function menuChildClick(){
  152.     // Cancel the event so that it does not bubble up to its parent.
  153.     popUp.document.parentWindow.event.cancelBubble = true;
  154.     // Retrieve the source element from the pop-up which fired the event.
  155.     srcElem = popUp.document.parentWindow.event.srcElement;
  156.     // Create a new event object.
  157.     oEvent = createEventObject();
  158.     // Assign the event object's result property to the ID of the custom element's ID which fired this event.
  159.     oEvent.result = srcElem.id;
  160.     // Fire the custom element's event.
  161.     propId.fire (oEvent);
  162.     // Hide the pop-up.
  163.     hidePopup();    
  164. }
  165. ////////////////////////////////////////////////////////////////////////////////////
  166. // Function : HidePopup
  167. // Executed : When the onmouseleave event fires on the custom Element.
  168. // Usage : Hides the pop-up window for the menu.
  169. ////////////////////////////////////////////////////////////////////////////////////
  170. function hidePopup(){
  171.     if(popUp)
  172.         if(popUp.isOpen)
  173.             popUp.hide();
  174. }
  175. ////////////////////////////////////////////////////////////////////////////////////
  176. // Function : menuItemOver
  177. // Executed : When the onmouseover event fires on the custom Element.
  178. // Usage : Changes the background color & font color of the Element.
  179. ////////////////////////////////////////////////////////////////////////////////////
  180. function menuItemOver(){
  181.     // Retrieve the source element.
  182.     srcElem = event.srcElement;
  183.     window.status = srcElem.id;
  184.     // Set the element's style.
  185.     srcElem.style.borderRight = "1px outset black";
  186.     srcElem.style.borderTop = "1px outset white";
  187.     srcElem.style.borderLeft = "1px outset white";
  188.     srcElem.style.borderBottom = "1px outset black";
  189. }
  190. ////////////////////////////////////////////////////////////////////////////////////
  191. // Function : menuItemOut
  192. // Executed : When the onmouseout event fires on the custom Element.
  193. // Usage : Restores the background color & font color of the Element
  194. //                      to the defaults.
  195. ////////////////////////////////////////////////////////////////////////////////////
  196. function menuItemOut(){
  197.     // Retrieve the source element.
  198.     srcElem = event.srcElement;
  199.     // Set the element's style.
  200.     srcElem.style.backgroundColor = mColor;
  201.     srcElem.style.color = "black";
  202.     srcElem.style.border = "1px solid";
  203.     srcElem.style.borderColor = mColor;
  204. }
  205. ////////////////////////////////////////////////////////////////////////////////////
  206. // Function : InnerText
  207. // Parameter : string
  208. // Executed : Called from the mouseClick function.
  209. // Usage : InnerText function gets the innerHTML of the custom element, which can
  210. //      contain Text + HTML; example, innerHTML of the first custom element looks like
  211. //      Start <ie:menu>Run</ie:menu>.... The function strips out the text until the
  212. //      first instance of "<" and returns the string.
  213. ////////////////////////////////////////////////////////////////////////////////////
  214. function InnerText(szText){
  215.     var startTag = szText.indexOf("<");
  216.     if(szText.substr(0, startTag) == "")
  217.         return szText;
  218.     else
  219.         return szText.substr(0,startTag);
  220. }
  221. </script>
  222.  
  223. <BODY>
  224. </BODY>
  225. </HTML>